<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test12</title>
		<style>
			body
			{
				background-color: black;
			}
			#d1
			{
				position: absolute;
				left: 0px;
				top: 0px;
				background-color: black;
				width: 1200px;
				height: 1200px;
			}
			.bgd1
			{
				position: absolute;
				width: 248px;
				height: 248px;
				background-color: aqua;
				border-radius: 100%;
				transition: 2.5s;
				transition-delay: 2s;
			}
			#bgp1
			{
				left: 501px;
				top: 451px;
				transition-delay: 0s;
			}
			#bgp2
			{
				left: 401px;
				top: 101px;
			}
			#bgp3
			{
				left: 801px;
				top: 201px;
			}
			#bgp4
			{
				left: 101px;
				top: 301px;
			}
			#bgp5
			{
				left: 101px;
				top: 801px;
			}
			#bgp6
			{
				left: 701px;
				top: 801px;
				width: 348px;
				height: 348px;
			}
			#cnt
			{
				background-color: transparent;
			}
			.ccn
			{
				position: absolute;
				height: 20px;
				width: 0px;
				background-color: aqua;
				box-shadow: 0px 0px 0px aqua;
				transition: 2s;
				transition-delay: 1s;
			}
			#cn2
			{
				left: 579px;
				top: 444px;
				transform: rotate(250deg);
			}
			#cn3
			{
				left: 720px;
				top: 486px;
				transform: rotate(140deg);
			}
			#cn4
			{
				left: 502px;
				top: 526px;
				transform: rotate(25deg);
			}
			#cn5
			{
				left: 520px;
				top: 648px;
				transform: rotate(136deg);
			}
			#cn6
			{
				left: 686px;
				top: 676px;
				transform: rotate(236deg);
			}
			.cd1
			{
				position: absolute;
				width: 250px;
				height: 250px;
				background-color: black;
				border-radius: 100%;
			}
			.cp1
			{
				margin-top: 100px;
				font-size: 30px;
				color: black;
				text-align: center;
				text-shadow: 0px 0px 2px aqua;
				transition: 1s;
				transition-delay: 4s;
			}
			.ms
			{
				position: relative;
				font-size: 30px;
				color: transparent;
				top: -20px;
				text-align: center;
				transition: 2s;
				transition-delay: 4s;
			}
			#ms1
			{
				transition-delay: 0s;
			}
			#d1d1
			{
				left: 500px;
				top: 450px;
			}
			#d1d2
			{
				left: 400px;
				top: 100px;
			}
			#d1d3
			{
				left: 800px;
				top: 200px;
			}
			#d1d4
			{
				left: 100px;
				top: 300px;
			}
			#d1d5
			{
				left: 100px;
				top: 800px;
			}
			#d1d6
			{
				left: 700px;
				top: 800px;
				width: 350px;
				height: 350px;
			}
			#d1p1
			{
				margin-top: 90px;
				font-size: 50px;
				transition-delay: 0s;
			}
			#d1p6
			{
				margin-top: 150px;
			}
			#d1:hover #bgp1
			{
				left: 490px;
				top: 440px;
				width: 270px;
				height: 270px;
			}
			#d1:hover #bgp2
			{
				left: 390px;
				top: 90px;
				width: 270px;
				height: 270px;
			}
			#d1:hover #bgp3
			{
				left: 790px;
				top: 190px;
				width: 270px;
				height: 270px;
			}
			#d1:hover #bgp4
			{
				left: 90px;
				top: 290px;
				width: 270px;
				height: 270px;
			}
			#d1:hover #bgp5
			{
				left: 90px;
				top: 790px;
				width: 270px;
				height: 270px;
			}
			#d1:hover #bgp6
			{
				left: 690px;
				top: 790px;
				width: 370px;
				height: 370px;
			}
			#d1:hover .cp1
			{
				color: aqua;
			}
			#d1:hover .ms
			{
				color: aqua;
			}
			#d1:hover #d1p1
			{
				color: aqua;
			}
			#d1:hover .ccn
			{
				box-shadow: 0px 0px 0px aqua;
			}
			#d1:hover #cn2
			{
				left: 510px;
				top: 392px;
				width: 114px;
			}
			#d1:hover #cn3
			{
				left: 704px;
				top: 438px;
				width: 140px;
			}
			#d1:hover #cn4
			{
				left: 336px;
				top: 490px;
				width: 176px;
			}
			#d1:hover #cn5
			{
				left: 286px;
				top: 742px;
				width: 280px;
			}
			#d1:hover #cn6
			{
				left: 654px;
				top: 740px;
				width: 174px;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<div id="bg">
				<div class="bgd1" id="bgp1"></div>
				<div class="bgd1" id="bgp2"></div>
				<div class="bgd1" id="bgp3"></div>
				<div class="bgd1" id="bgp4"></div>
				<div class="bgd1" id="bgp5"></div>
				<div class="bgd1" id="bgp6"></div>
			</div>
			<div id="cnt">
				<div class="ccn" id="cn2"></div>
				<div class="ccn" id="cn3"></div>
				<div class="ccn" id="cn4"></div>
				<div class="ccn" id="cn5"></div>
				<div class="ccn" id="cn6"></div>
			</div>
			<div class="cd1" id="d1d1">
				<p class="cp1" id="d1p1">E=hv</p>
				<p class="ms" id="ms1">光子能量</p>
			</div>
			<div class="cd1" id="d1d2">
				<p class="cp1" id="d1p2">E<sub>k</sub>=hv-W<sub>0</sub></p>
				<p class="ms" id="ms2">最大初动能</p>
			</div>
			<div class="cd1" id="d1d3">
				<p class="cp1" id="d1p3">eU<sub>e</sub>=<sup>1</sup>/<sub>2</sub>m<sub>e</sub>v<sub>c</sub><sup>2</sup></p>
				<p class="ms" id="ms3">遏止电压</p>
			</div>
			<div class="cd1" id="d1d4">
				<p class="cp1" id="d1p4">P=<sup>h</sup>/<sub>λ</sub></p>
				<p class="ms" id="ms4">德布罗意波</p>
			</div>
			<div class="cd1" id="d1d5">
				<p class="cp1" id="d1p5">v<sub>c</sub>=<sup>W<sub>0</sub></sup>/<sub>h</sub></p>
				<p class="ms" id="ms5">截止频率</p>
			</div>
			<div class="cd1" id="d1d6">
				<p class="cp1" id="d1p6">h=6.62607015×10<sup>-34</sup>J·s</p>
				<p class="ms" id="ms6">普朗克常数</p>
			</div>
		</div>
	</body>
</html>